<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>智能化运维系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="layui/layui.js"></script>
  <style>
    .d-box {
      box-shadow: 4px 4px 16px #757575;
      border-radius: 4px;
      background: #fff;
      margin-top: 30px;
      height: auto;
      width: 90%;
    }
  </style>

  <!-- Bootstrap -->
  <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">

  <!-- Custom Theme Style -->
  <link href="../build/css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">
  <div class="container body">
    <div class="main_container">
      <div class="col-md-3 left_col">
        <div class="left_col scroll-view">
          <div class="navbar nav_title" style="border: 0;">
            <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Smart System</span></a>
          </div>

          <div class="clearfix"></div>

          <!-- menu profile quick info -->
          <div class="profile clearfix">
            <div class="profile_pic">
              <img src="images/istio.png" alt="..." class="img-circle profile_img">
            </div>
            <div class="profile_info">
              <span>Welcome</span>
              <h2></h2>
            </div>
            <div class="clearfix"></div>
          </div>
          <!-- /menu profile quick info -->

          <br />

          <!-- sidebar menu -->
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
              <h3>智能化运行分析和自适应系统</h3>
              <ul class="nav side-menu">
                <li><a><i class="fa fa-home"></i> 监控界面 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">

                    <li><a href="layermodel.html">分层监控</a></li>
                    <li><a href="dataUI.html">指标数据</a></li>
                    
                  </ul>
                </li>
                <li><a><i class="fa fa-edit"></i> 自适应调整 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="datastrategy.html">基于指标风控调整</a></li>
                    <li><a href="taskstrategy.html">基于任务优先级调整</a></li>
                    <li><a href="linkstrategy.html">基于强化学习的微服务链重部署</a></li>
                  </ul>
                </li>

                <!--
                <li><a><i class="fa fa-desktop"></i> 风险分析告警 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="alert.html">风险告警及指标追踪</a></li>

                  </ul>
                </li>

                
                <li><a><i class="fa fa-table"></i> 指标阈值设置 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="tasklayer.html">任务层</a></li>
                    <li><a href="servicelayer.html">微服务层</a></li>
                    <li><a href="nodelayer.html">结点层</a></li>
                  </ul>
                </li>
                -->
              
              </ul>
            </div>

          
          </div>
          <!-- /sidebar menu -->


          <!-- /menu footer buttons -->
          <!--
            <div class="sidebar-footer hidden-small">
              <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
              </a>
            </div>
          -->
          <!-- /menu footer buttons -->
        </div>
      </div>

      <!-- top navigation -->

      <div class="top_nav">
        <div class="nav_menu">
          <div class="nav toggle">
            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
          </div>
          
        </div>
      </div>

      <!-- /top navigation -->

      <!-- page content -->
      <div class="right_col" role="main">
        <div class="">
          <div class="page-title">
            <div class="title_left">
              <h3>自适应方案选择</h3>
            </div>

            <!--<div class="title_right">
                <div class="col-md-5 col-sm-5   form-group pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>
                </div>
              </div>-->
          </div>

          <div class="clearfix"></div>

          <div class="row">
            <div class="col-md-12 col-sm-12  ">
              <div class="x_panel">
                <div class="x_title">
                  <h2></h2>
                  <ul class="nav navbar-right panel_toolbox">

                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">

                  <div>
                    <form class="layui-form" action="" style="margin: 5px 120px;">
                      <div class="layui-row">

                        <div class="layui-col-md6">
                          <table class="layui-table" style="margin-left: 5px;width: 95%;">
                            <colgroup>
                              <col width="150">
                              <col width="200">
                              <col>
                            </colgroup>
                            <thead>
                              <tr>
                                <th>风险</th>
                                <th>异常指标</th>

                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>过载风险</td>
                                <td>CPU异常</td>

                              </tr>
                              <tr>
                                <td>过载风险</td>
                                <td>内存异常</td>

                              </tr>
                            </tbody>
                          </table>
                        </div>





                        <div class="layui-col-md6">
                          <table class="layui-table" style="margin-left: 10px;width: 95%;">

                          </table>
                        </div>
                      </div>

                      <div class="layui-col-md4">
                        <div class="one">
                          <div class="d-box">
                            <div style="padding-top: 10px;">
                              <h2 style="margin-left: 25px;">
                                <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                                部署策略
                              </h2>
                            </div>
                            <div class="layui-form-item">
                              <div class="layui-input-block" style="margin-left: 40px;margin-top: 10px;">
                                <div class="c11"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                    title="扩容"></div>
                                <div class="c12"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                    disabled="disabled" title="缩容"></div>
                                <div class="c13"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                    title="限流"></div>
                                <div class="c14"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                    disabled="disabled" title="熔断"></div>
                                <div class="c15"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                    title="重部署"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="layui-col-md4">
                        <div class="two" style="display: none;">
                          <div class="d-box">
                            <div style="padding-top: 10px;">
                              <h2 style="margin-left: 25px;">
                                <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                                空闲服务器
                              </h2>
                            </div>
                            <div class="layui-form-item">
                              <div class="layui-input-block" style="margin-left: 40px;margin-top: 10px;">
                                <div class="c21"><input class="f2" type="checkbox" name="test2" lay-skin="primary"
                                    title="server1"></div>
                                <div class="c22"><input class="f2" type="checkbox" name="test2" lay-skin="primary"
                                    title="server2"></div>
                                <div class="c23"><input class="f2" type="checkbox" name="test2" lay-skin="primary"
                                    title="server3"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="layui-col-md4">
                        <div class="three" style="display: none;">
                          <div class="d-box">
                            <div style="padding-top: 10px;">
                              <h2 style="margin-left: 25px;">
                                <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                                部署方案
                              </h2>
                            </div>
                            <div class="layui-form-item">
                              <div class="layui-input-block" style="margin-left: 40px;margin-top: 10px;">
                                <div><input class="f3" type="checkbox" name="test3" lay-skin="primary" title="扩容">
                                </div>
                                <div><input class="f3" type="checkbox" name="test3" lay-skin="primary" title="限流">
                                </div>
                                <div><input class="f3" type="checkbox" name="test3" lay-skin="primary" title="熔断">
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  </div>
                  </form>

                  <div style="width:100%;height: 30px;margin-top: -20px;">
                    <button type="button" class="layui-btn layui-btn-lg"
                      style="width:130px;margin-right:100px;margin-top:-10px;margin-bottom: 40px;float:right">部
                      署</button>
                  </div>

                  <div style="margin: 60px 60px;margin-top: -20px;">
                    <div class="layui-form-item layui-form-text">
                      <div class="layui-input-block"
                        style="margin-left: 0px; box-shadow:4px 4px 16px #757575;border-radius:4px; width:97%;">
                        <textarea name="text" placeholder="结果输出" class="layui-textarea"
                          style="height: 200px;border-radius:4px;"></textarea>
                      </div>
                    </div>
                  </div>

                </div>
                <script>
                  layui.use('form', function () {
                    var form = layui.form;
                    form.render();
                  });



                  $(document).ready(function () {
                    $(".layui-textarea").append("扩容策略风险：30%\n 限流策略风险50%\n 重部署策略风险：70%\n 扩容限流组合风险：10%");
                    $(".c11").click(function () {
                      $(".two").show();
                    });
                    $(".c13").click(function () {
                      $(".two").show();
                    });
                    $(".c15").click(function () {
                      $(".two").show();
                    });


                  });
                </script>


                <!--<iframe src="http://www.baidu.com" width="1500" height="500" frameborder="0" scrolling="no">-->

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /page content -->

    <!-- footer content -->
    <footer>
      <div class="pull-right">
        Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
      </div>
      <div class="clearfix"></div>
    </footer>
    <!-- /footer content -->
  </div>
  </div>

  <!-- jQuery -->
  <script src="../vendors/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="../vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <!-- FastClick -->
  <script src="../vendors/fastclick/lib/fastclick.js"></script>
  <!-- NProgress -->
  <script src="../vendors/nprogress/nprogress.js"></script>

  <!-- Custom Theme Scripts -->
  <script src="../build/js/custom.min.js"></script>
</body>

</html>